<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getSinger"
    >
      <van-cell-group>
        <van-cell center v-for="item in singerList" :key="item.id">
          <template #title>
            <van-image
              round
              :src="item.img1v1Url"
              width="50"
              height="50"
              fit="cover"
              class="align"
            />
            <!-- <span style="margin-left: 10px; font-size:15px; margin-top: 5px">{{
            item.name
           }}</span> -->
            <span
              slot="title"
              v-html="highlight(item.name)"
              style="margin-left: 10px; font-size:15px; margin-top: 5px"
            ></span>
          </template>
          <template #right-icon v-if="item.accountId">
            <van-icon name="user-circle-o" style=" margin-right: 5px;" />
            <span style="color:#b8b8b8">已入驻</span>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { getSinger } from '@/api/SongSearch'
// import { duplicateRemoval } from '@/PublicMethods'
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      singerList: [],
      loading: false,
      finished: false,
      limit: 10,
      offset: 1,
      type: 100
    }
  },
  created () {},
  mounted () {},
  methods: {
    async getSinger () {
      try {
        const {
          result: { artists }
        } = await getSinger({
          keywords: this.keywords,
          limit: this.limit,
          offset: (this.offset - 1) * this.limit,
          type: this.type
        })
        // 将请求回来的数据与当前的singerList对比，去重重复的数据，得到不重复的数据再push
        // 判断artists.id 有没有重复的
        this.singerList.push(...artists)
        const obj = {}
        this.singerList = this.singerList.reduce((cur, next) => {
          if (!obj[next.id]) {
            obj[next.id] = true && cur.push(next)
          }
          return cur
        }, [])

        this.loading = false
        if (artists.length) {
          this.offset++
        } else {
          this.finished = true
        }
      } catch (error) {}
    },
    // 高亮
    highlight (text) {
      const regExp = new RegExp(this.keywords, 'gi')
      const highlightStr = `<span class="active">${this.keywords}</span>`
      return text.replace(regExp, highlightStr)
    }
  }
}
</script>

<style scoped lang="less">
/deep/.align {
  vertical-align: middle !important;
}
</style>
